#ifndef __INDEX_HTML_H__
#define __INDEX_HTML_H__
const char index_html[] = "\
<!DOCTYPE html>\r\n \
<html lang=\"zh\">\r\n \
<head>\r\n \
    <meta charset=\"UTF-8\">\r\n \
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n \
    <title>后台管理系统</title>\r\n \
\r\n \
    <style>\r\n \
        /* 进度条样式 */\r\n \
        #progress-container {\r\n \
            height: 20px;\r\n \
            width: 30%;\r\n \
            background-color: #f3f3f3;\r\n \
            border: 1px solid #ccc;\r\n \
            margin-top: 1px;\r\n \
            margin-left: 20px;\r\n \
        }\r\n \
\r\n \
        .wifi-list-container {\r\n \
            max-height: 200px; /* 限制WiFi列表的最大高度 */\r\n \
            overflow-y: auto;  /* 启用垂直滚动条 */\r\n \
            border: 1px solid #ccc; /* 可选：为容器添加边框以便更好地观察效果 */\r\n \
            -webkit-overflow-scrolling: touch;\r\n \
        }\r\n \
        .wifi-list {\r\n \
            list-style-type: none;\r\n \
            padding: 0;\r\n \
        }\r\n \
        .wifi-list li {\r\n \
            padding: 10px;\r\n \
            cursor: pointer;\r\n \
        }\r\n \
        .wifi-list li:hover {\r\n \
            background-color: #f0f0f0;\r\n \
        }\r\n \
        .selected {\r\n \
            background-color: #d4edda;\r\n \
            color: #155724;\r\n \
        }\r\n \
    </style>\r\n \
</head>\r\n \
<body style=\"width: 62%; margin: 0 auto;\">\r\n \
    <h1 style=\"text-align: center;\">WiFi Configure</h1>\r\n \
    <br>\r\n \
\r\n \
    <br>\r\n \
    <label for=\"wifiName\">WiFi 名称:</label>\r\n \
    <input type=\"text\" id=\"wifiName\" placeholder=\"输入WiFi名称\">\r\n \
    <label for=\"wifiPassword\">密码:</label>\r\n \
    <input type=\"text\" id=\"wifiPassword\" placeholder=\"输入WiFi密码\">\r\n \
    <button onclick=\"setWifi()\">设定</button>\r\n \
    <button onclick=\"scanWifi()\">扫描WiFi</button>\r\n \
    <label id=\"wifi-indicator\"></label>\r\n \
    <br><br>\r\n \
    <div class=\"wifi-list-container\">\r\n \
        <ul id=\"wifiList\" class=\"wifi-list\"></ul>\r\n \
    </div>\r\n \
    <script>\r\n \
        function clearWifiIndicator() {\r\n \
            document.getElementById('wifi-indicator').innerText = '';\r\n \
        }\r\n \
\r\n \
        let wifiList = []; // 存储模拟的WiFi列表\r\n \
\r\n \
        function scanWifi() {\r\n \
            \r\n \
            document.getElementById('wifi-indicator').innerText = '正在扫描WiFi...';\r\n \
            document.getElementById('wifi-indicator').style.backgroundColor = '#4caf50';\r\n \
\r\n \
            wifiList = [];\r\n \
\r\n \
            var xhr = new XMLHttpRequest();\r\n \
            xhr.open('GET', '/scanWifi', true);\r\n \
\r\n \
            xhr.onreadystatechange = function() {\r\n \
                if (xhr.readyState == 4 && xhr.status == 200) {\r\n \
                    var response = xhr.responseText;\r\n \
                    if (!response) {\r\n \
                        return;\r\n \
                    }\r\n \
                    \r\n \
                    /* Start: 去重 */\r\n \
                    var raw = JSON.parse(response);\r\n \
                    for (var i = 0; i < raw.length; i++) {\r\n \
                        var isDup = false;\r\n \
                        for (var j = 0; j  < wifiList.length; j++) {\r\n \
                            if (raw[i] === wifiList[j]) {\r\n \
                                isDup = true;\r\n \
                            }\r\n \
                        }\r\n \
                        if (!isDup) { \r\n \
                            wifiList.push(raw[i]);\r\n \
                        }\r\n \
                    }\r\n \
                    /* End: 去重 */\r\n \
                    updateWifiList();\r\n \
                    document.getElementById('wifiName').value = wifiList[0];\r\n \
                    document.getElementById('wifiPassword').value = \"\";\r\n \
\r\n \
                    document.getElementById('wifi-indicator').innerText = '扫描完成';\r\n \
                    setTimeout(clearWifiIndicator, 2000);\r\n \
                }\r\n \
            };\r\n \
\r\n \
            xhr.send();\r\n \
        }\r\n \
\r\n \
        function updateWifiList() {\r\n \
            const wifiUl = document.getElementById('wifiList');\r\n \
            wifiUl.innerHTML = ''; // 清空现有列表\r\n \
\r\n \
            wifiList.forEach(function(wifiName) {\r\n \
                const listItem = document.createElement('li');\r\n \
                listItem.textContent = wifiName;\r\n \
                listItem.addEventListener('click', function() {\r\n \
                    fillWifiName(wifiName);\r\n \
                });\r\n \
                wifiUl.appendChild(listItem);\r\n \
            });\r\n \
        }\r\n \
\r\n \
        function fillWifiName(wifiName) {\r\n \
            document.getElementById('wifiName').value = wifiName;\r\n \
        }\r\n \
\r\n \
        function setWifi() {\r\n \
            var xhr = new XMLHttpRequest();\r\n \
            xhr.open('POST', '/setWifi', true);\r\n \
            xhr.setRequestHeader('Content-Type', 'application/json');\r\n \
\r\n \
            xhr.onload = function() {\r\n \
                if (xhr.status === 200) {\r\n \
                    document.getElementById('wifi-indicator').innerText = '成功';\r\n \
                    document.getElementById('wifi-indicator').style.backgroundColor = '#4caf50';\r\n \
                    setTimeout(clearWifiIndicator, 2000);\r\n \
                } else {\r\n \
                    document.getElementById('wifi-indicator').innerText = '失败';\r\n \
                    document.getElementById('wifi-indicator').style.backgroundColor = '#f44336';\r\n \
                    setTimeout(clearWifiIndicator, 2000);\r\n \
                }\r\n \
            }\r\n \
\r\n \
            var wifiArgs = {};\r\n \
            wifiArgs.ssid = document.getElementById('wifiName').value;\r\n \
            wifiArgs.password = document.getElementById('wifiPassword').value;\r\n \
\r\n \
            xhr.send(JSON.stringify(wifiArgs, null, 2));\r\n \
        }\r\n \
\r\n \
    </script>\r\n \
    <br><br>\r\n \
    <hr>\r\n \
\r\n \
    温度：<label id=\"temperature\">Loading...</label>℃<br>\r\n \
    湿度：<label id=\"humidity\">Loading...</label>%<br>\r\n \
    时间：<label id=\"time-RTC\">Loading...</label>\r\n \
    &nbsp;&nbsp;&nbsp;<button onclick=\"setRTC()\">同步浏览器时间</button>\r\n \
    <script>\r\n \
        function refreshTemperature() {\r\n \
            var xhr = new XMLHttpRequest();\r\n \
            xhr.open('GET', '/temperature', true);\r\n \
\r\n \
            xhr.onreadystatechange = function() {\r\n \
                if (xhr.readyState == 4 && xhr.status == 200) {\r\n \
                    var response = xhr.responseText;\r\n \
                    if (!response) {\r\n \
                        return;\r\n \
                    }\r\n \
\r\n \
                    var raw = JSON.parse(response);\r\n \
                    document.getElementById('temperature').innerText = raw.temperature;\r\n \
                    document.getElementById('humidity').innerText = raw.humidity;\r\n \
                    setTimeout(clearWifiIndicator, 2000);\r\n \
                }\r\n \
            };\r\n \
\r\n \
            xhr.send();\r\n \
        }\r\n \
        refreshTemperature();\r\n \
        setInterval(refreshTemperature, 15000);\r\n \
\r\n \
        function refreshTimeRTC() {\r\n \
            var xhr = new XMLHttpRequest();\r\n \
            xhr.open('GET', '/time-RTC', true);\r\n \
\r\n \
            xhr.onreadystatechange = function() {\r\n \
                if (xhr.readyState == 4 && xhr.status == 200) {\r\n \
                    var response = xhr.responseText;\r\n \
                    if (!response) {\r\n \
                        return;\r\n \
                    }\r\n \
\r\n \
                    let date = new Date((response - 3600*8)*1000);\r\n \
                    // 使用Date对象的各种方法来格式化日期和时间\r\n \
                    let year = date.getFullYear();\r\n \
                    let month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始计数，所以需要加1\r\n \
                    let day = String(date.getDate()).padStart(2, '0');\r\n \
                    let hours = String(date.getHours()).padStart(2, '0');\r\n \
                    let minutes = String(date.getMinutes()).padStart(2, '0');\r\n \
                    // let seconds = String(date.getSeconds()).padStart(2, '0');\r\n \
                    // 拼接成日期时间字符串\r\n \
                    // let formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;\r\n \
                    let formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}`;\r\n \
\r\n \
                    document.getElementById('time-RTC').innerText = formattedDateTime;\r\n \
                }\r\n \
            };\r\n \
\r\n \
            xhr.send();\r\n \
        }\r\n \
        refreshTimeRTC();\r\n \
        setInterval(refreshTimeRTC, 10000);\r\n \
\r\n \
        function setRTC() {\r\n \
            var xhr = new XMLHttpRequest();\r\n \
            xhr.open('POST', '/setRTC', true);\r\n \
            xhr.setRequestHeader('Content-Type', 'application/json');\r\n \
            let now = new Date().getTime() / 1000;\r\n \
            xhr.send(parseInt(now) + 8*3600);\r\n \
        }\r\n \
    </script>\r\n \
\r\n \
    <br><br><br>\r\n \
        <label>蜂鸣 ：</label>\r\n \
        <input type=\"radio\" id=\"buz-on\" name=\"buz\" value=\"1\" onclick=\"relay(0, true)\">\r\n \
        <label for=\"buz-on\">接通</label>\r\n \
        <input type=\"radio\" id=\"buz-off\" name=\"buz\" value=\"0\" onclick=\"relay(0, false)\">\r\n \
        <label for=\"buz-off\">断开</label>\r\n \
        <input type=\"range\" min=\"0\" max=\"30\" value=\"15\" step=\"1\" id=\"volume-slider\" onchange=\"setVolume()\">\r\n \
        <br><br>\r\n \
        <label>通道1：</label>\r\n \
        <input type=\"radio\" id=\"ch1-on\" name=\"ch1\" value=\"1\" onclick=\"relay(1, true)\">\r\n \
        <label for=\"ch1-on\">接通</label>\r\n \
        <input type=\"radio\" id=\"ch1-off\" name=\"ch1\" value=\"0\" onclick=\"relay(1, false)\">\r\n \
        <label for=\"ch1-off\">断开</label>\r\n \
        <br><br>\r\n \
        <label>通道2：</label>\r\n \
        <input type=\"radio\" id=\"ch2-on\" name=\"ch2\" value=\"on\" onclick=\"relay(2, true)\"\">\r\n \
        <label for=\"ch2-on\">接通</label>\r\n \
        <input type=\"radio\" id=\"ch2-off\" name=\"ch2\" value=\"off\" onclick=\"relay(2, false)\">\r\n \
        <label for=\"ch2-off\">断开</label>\r\n \
        <br><br>\r\n \
        <label>LED：</label>\r\n \
        <input type=\"radio\" id=\"led-on\" name=\"led\" value=\"on\" onclick=\"relay(3, true)\"\">\r\n \
        <label for=\"led-on\">接通</label>\r\n \
        <input type=\"radio\" id=\"led-off\" name=\"led\" value=\"off\" onclick=\"relay(3, false)\">\r\n \
        <label for=\"led-off\">断开</label>\r\n \
        <input type=\"range\" min=\"0\" max=\"100\" value=\"50\" step=\"1\" id=\"brightness-slider\" onchange=\"setBrightness()\">\r\n \
    <script>\r\n \
        function relay(channel, connect) {\r\n \
            var xhr = new XMLHttpRequest();\r\n \
            xhr.open('POST', '/relay', true);\r\n \
            xhr.setRequestHeader('Content-Type', 'application/json');\r\n \
            var args = {};\r\n \
            args.channel = channel;\r\n \
            args.connect = connect;\r\n \
            xhr.send(JSON.stringify(args, null, 2));\r\n \
        }\r\n \
\r\n \
        function setBrightness() {\r\n \
            var xhr = new XMLHttpRequest();\r\n \
            xhr.open('POST', '/setBrightness', true);\r\n \
            xhr.setRequestHeader('Content-Type', 'application/json');\r\n \
            var args = document.getElementById('brightness-slider').value;\r\n \
            xhr.send(args);\r\n \
        }\r\n \
\r\n \
        function getBrightness() {\r\n \
            var xhr = new XMLHttpRequest();\r\n \
            xhr.open('GET', '/getBrightness', true);\r\n \
\r\n \
            xhr.onreadystatechange = function() {\r\n \
                if (xhr.readyState == 4 && xhr.status == 200) {\r\n \
                    var response = xhr.responseText;\r\n \
                    if (!response) {\r\n \
                        return;\r\n \
                    }\r\n \
\r\n \
                    document.getElementById('brightness-slider').value = response;\r\n \
                }\r\n \
            };\r\n \
\r\n \
            xhr.send();\r\n \
        }\r\n \
        getBrightness();\r\n \
\r\n \
        function setVolume() {\r\n \
            var xhr = new XMLHttpRequest();\r\n \
            xhr.open('POST', '/setVolume', true);\r\n \
            xhr.setRequestHeader('Content-Type', 'application/json');\r\n \
            var args = document.getElementById('volume-slider').value;\r\n \
            xhr.send(args);\r\n \
        }\r\n \
\r\n \
        function getVolume() {\r\n \
            var xhr = new XMLHttpRequest();\r\n \
            xhr.open('GET', '/getVolume', true);\r\n \
            xhr.onreadystatechange = function() {\r\n \
                if (xhr.readyState == 4 && xhr.status == 200) {\r\n \
                    var response = xhr.responseText;\r\n \
                    if (!response) {\r\n \
                        return;\r\n \
                    }\r\n \
\r\n \
                    document.getElementById('volume-slider').value = response;\r\n \
                }\r\n \
            };\r\n \
\r\n \
            xhr.send();\r\n \
        }\r\n \
        getVolume();\r\n \
\r\n \
    </script>\r\n \
    <br><br><br>\r\n \
\r\n \
    <button id=\"save-event\" onclick=\"saveEvent()\">保存设置</button>\r\n \
    <label id=\"save-indicator\"></label>\r\n \
    <button id=\"set-auto-ctrl\" onclick=\"setAutoCtrl()\">自动控制</button>\r\n \
    <script>\r\n \
        function clearSaveIndicator() {\r\n \
            document.getElementById('save-indicator').innerText = '';\r\n \
        }\r\n \
\r\n \
        function saveEvent() {\r\n \
            var configs = {};\r\n \
\r\n \
            /* Start: 绝对时间事件 */\r\n \
            const abstimeContainers = document.querySelectorAll('div.abstime-container');\r\n \
            var absTimer = [];\r\n \
            abstimeContainers.forEach(abs => {\r\n \
                const timePicker = abs.querySelector('input[type=\"time\"]');\r\n \
                if (timePicker.value) {\r\n \
                    const operation = abs.querySelector('select[id=\"operation\"]');\r\n \
                    const channel = abs.querySelector('select[id=\"channel\"]');\r\n \
                    const repeats = abs.querySelectorAll('input.repeat');\r\n \
\r\n \
                    var absItem = {};\r\n \
                    absItem.time = timePicker.value;\r\n \
                    absItem.operation = Number(operation.value);\r\n \
                    absItem.channel = Number(channel.value);\r\n \
                    repeats.forEach(rep => {\r\n \
                        absItem[rep.value] = rep.checked;\r\n \
                    });\r\n \
                    absTimer.push(absItem);\r\n \
                }\r\n \
            });\r\n \
            configs.absTimer = absTimer;\r\n \
            /* End: 绝对时间事件 */\r\n \
\r\n \
            /* Start: 温度事件 */\r\n \
            const tempContainers = document.querySelectorAll('div.temp-container');\r\n \
            var temp = [];\r\n \
            tempContainers.forEach(tmp => {\r\n \
                const compare = tmp.querySelector('select[id=\"compare\"]');\r\n \
                const targetTemp = tmp.querySelector('input[id=\"target-temp\"]');\r\n \
\r\n \
                if (targetTemp.value) {\r\n \
                    const compare = tmp.querySelector('select[id=\"compare\"]');\r\n \
                    const operation = tmp.querySelector('select[id=\"operation\"]');\r\n \
                    const channel = tmp.querySelector('select[id=\"channel\"]');\r\n \
\r\n \
                    var tempItem = {};\r\n \
                    tempItem.compare = Number(compare.value);\r\n \
                    tempItem.targetTemp = Number(targetTemp.value);\r\n \
                    tempItem.operation = Number(operation.value);\r\n \
                    tempItem.channel = Number(channel.value);\r\n \
                    temp.push(tempItem);\r\n \
                } \r\n \
            });\r\n \
            configs.temp = temp;\r\n \
            /* End: 温度事件 */\r\n \
\r\n \
            var xhr = new XMLHttpRequest();\r\n \
            xhr.open('POST', '/setTimer', true);\r\n \
            xhr.setRequestHeader('Content-Type', 'application/json');\r\n \
\r\n \
            xhr.onload = function() {\r\n \
                if (xhr.status === 200) {\r\n \
                    document.getElementById('save-indicator').innerText = '成功';\r\n \
                    document.getElementById('save-indicator').style.backgroundColor = '#4caf50';\r\n \
                    setTimeout(clearSaveIndicator, 2000);\r\n \
                } else {\r\n \
                    document.getElementById('save-indicator').innerText = '失败';\r\n \
                    document.getElementById('save-indicator').style.backgroundColor = '#f44336';\r\n \
                    setTimeout(clearSaveIndicator, 2000);\r\n \
                }\r\n \
            }\r\n \
\r\n \
            var cfg = JSON.stringify(configs, null, 2);\r\n \
            // console.log(cfg);\r\n \
            xhr.send(cfg);\r\n \
        }\r\n \
\r\n \
        function setAutoCtrl() {\r\n \
            var xhr = new XMLHttpRequest();\r\n \
            xhr.open('POST', '/setAutoCtrl', true);\r\n \
            xhr.send(null);\r\n \
        }\r\n \
    </script>\r\n \
    <br><br>\r\n \
\r\n \
    <div id=\"abstime-wrapper\"></div>\r\n \
    <button id=\"add-abstime\">添加绝对时间事件</button>\r\n \
    <script>\r\n \
        let abstimeCount = 0;\r\n \
        const abstimeWrapper = document.getElementById('abstime-wrapper');\r\n \
        let abstimeValues = []; // 用于存储下拉框值的数组\r\n \
\r\n \
        // 定义包含下拉框和删除按钮的HTML模板字符串\r\n \
        const abstimeTemplate = (id) => `\r\n \
            <div class=\"abstime-container\" style=\"border: 1px solid #00000017; padding: 10px; margin: 10px; border-radius: 5px;\">\r\n \
                <input type=\"time\" id=\"timePicker\" name=\"timePicker\">\r\n \
                <select id=\"operation\">\r\n \
                    <option value=\"1\">接通</option>\r\n \
                    <option value=\"0\">断开</option>\r\n \
                </select>\r\n \
                <select id=\"channel\">\r\n \
                    <option value=\"0\">蜂鸣</option>\r\n \
                    <option value=\"1\">通道1</option>\r\n \
                    <option value=\"2\">通道2</option>\r\n \
                    <option value=\"3\">LED</option>\r\n \
                </select>\r\n \
                &nbsp;&nbsp;&nbsp;&nbsp;<button class=\"remove-abstime\">删除</button>\r\n \
                <br>\r\n \
                <input class=\"repeat\" type=\"checkbox\" id=\"sun-${id}\" value=\"sun\">\r\n \
                <label for=\"sun-${id}\">Sun</label>\r\n \
                <input class=\"repeat\" type=\"checkbox\" id=\"mon-${id}\" value=\"mon\">\r\n \
                <label for=\"mon-${id}\">Mon</label>\r\n \
                <input class=\"repeat\" type=\"checkbox\" id=\"tue-${id}\" value=\"tue\">\r\n \
                <label for=\"tue-${id}\">Tue</label>\r\n \
                <input class=\"repeat\" type=\"checkbox\" id=\"wed-${id}\" value=\"wed\">\r\n \
                <label for=\"wed-${id}\">Wed</label>\r\n \
                <input class=\"repeat\" type=\"checkbox\" id=\"thu-${id}\" value=\"thu\">\r\n \
                <label for=\"thu-${id}\">Thu</label>\r\n \
                <input class=\"repeat\" type=\"checkbox\" id=\"fri-${id}\" value=\"fri\">\r\n \
                <label for=\"fri-${id}\">Fri</label>\r\n \
                <input class=\"repeat\" type=\"checkbox\" id=\"sat-${id}\" value=\"sat\">\r\n \
                <label for=\"sat-${id}\">Sat</label>\r\n \
            </div>\r\n \
        `;\r\n \
\r\n \
        // 为dropdownWrapper添加事件委托，处理删除按钮的点击事件\r\n \
        abstimeWrapper.addEventListener('click', function(event) {\r\n \
            if (event.target && event.target.classList.contains('remove-abstime')) {\r\n \
                const container = event.target.closest('.abstime-container');\r\n \
                // const id = parseInt(container.querySelector('select').id.split('-')[2], 10);\r\n \
                container.remove();\r\n \
                // 删除对应位置的dropdownValues元素（可选，取决于你是否希望保持数组长度与下拉框数量一致）\r\n \
                // abstimeValues.splice(id, 1);\r\n \
            }\r\n \
        });\r\n \
\r\n \
        // 添加下拉框的按钮点击事件\r\n \
        document.getElementById('add-abstime').addEventListener('click', function() {\r\n \
            abstimeValues.push(null); // 初始化新下拉框的值为null\r\n \
            const newAbstimeContainer = document.createElement('div');\r\n \
            newAbstimeContainer.innerHTML = abstimeTemplate(abstimeCount); // abstimeCount\r\n \
            abstimeWrapper.appendChild(newAbstimeContainer);\r\n \
            abstimeCount++;\r\n \
        });\r\n \
    </script>\r\n \
\r\n \
    <br><br><br>\r\n \
    <div id=\"temp-wrapper\"></div>\r\n \
    <button id=\"add-temp\">添加温度事件</button>\r\n \
    <script>\r\n \
        let tempCount = 0;\r\n \
        const tempWrapper = document.getElementById('temp-wrapper');\r\n \
        let tempValues = []; // 用于存储下拉框值的数组\r\n \
\r\n \
        // 定义包含下拉框和删除按钮的HTML模板字符串\r\n \
        const tempTemplate = (id) => `\r\n \
            <div class=\"temp-container\"  style=\"border: 1px solid #00000017; padding: 10px; margin: 10px; border-radius: 5px;\">\r\n \
                <select id=\"compare\">\r\n \
                    <option value=\"0\">高于</option>\r\n \
                    <option value=\"1\">低于</option>\r\n \
                </select>\r\n \
                <input type=\"number\" min=\"-50\" max=\"120\" id=\"target-temp\" name=\"target-temp\" style=\"width: 60px\">℃\r\n \
                <select id=\"operation\">\r\n \
                    <option value=\"1\">接通</option>\r\n \
                    <option value=\"0\">断开</option>\r\n \
                </select>\r\n \
                <select id=\"channel\">\r\n \
                    <option value=\"0\">蜂鸣</option>\r\n \
                    <option value=\"1\">通道1</option>\r\n \
                    <option value=\"2\">通道2</option>\r\n \
                    <option value=\"3\">LED</option>\r\n \
                </select>\r\n \
                <button class=\"remove-temp\">删除</button>\r\n \
            </div>\r\n \
        `;\r\n \
\r\n \
        // 为tempWrapper添加事件委托，处理删除按钮的点击事件\r\n \
        tempWrapper.addEventListener('click', function(event) {\r\n \
            if (event.target && event.target.classList.contains('remove-temp')) {\r\n \
                const container = event.target.closest('.temp-container');\r\n \
                const id = parseInt(container.querySelector('select').id.split('-')[2], 10);\r\n \
                container.remove();\r\n \
                // 删除对应位置的tempValues元素（可选，取决于你是否希望保持数组长度与下拉框数量一致）\r\n \
                tempValues.splice(id, 1);\r\n \
            }\r\n \
        });\r\n \
\r\n \
        // 添加下拉框的按钮点击事件\r\n \
        document.getElementById('add-temp').addEventListener('click', function() {\r\n \
            tempValues.push(null); // 初始化新下拉框的值为null\r\n \
            const newTempContainer = document.createElement('div');\r\n \
            newTempContainer.innerHTML = tempTemplate(tempCount);\r\n \
            tempWrapper.appendChild(newTempContainer);\r\n \
            tempCount++;\r\n \
        });\r\n \
    </script>\r\n \
\r\n \
    <script>\r\n \
        function loadConfigs() {\r\n \
            var xhr = new XMLHttpRequest();\r\n \
            xhr.open('GET', '/configs', true);\r\n \
\r\n \
            xhr.onreadystatechange = function() {\r\n \
                if (xhr.readyState == 4 && xhr.status == 200) {\r\n \
                    var response = xhr.responseText;\r\n \
                    if (!response) {\r\n \
                        return;\r\n \
                    }\r\n \
                    \r\n \
                    var raw = JSON.parse(response);\r\n \
                    document.getElementById('wifiName').value = raw.ssid;\r\n \
                    document.getElementById('wifiPassword').value = raw.password;\r\n \
                }\r\n \
            };\r\n \
            xhr.send();\r\n \
        }\r\n \
\r\n \
        function loadTimers() {\r\n \
            var xhr = new XMLHttpRequest();\r\n \
            xhr.open('GET', '/timers', true);\r\n \
\r\n \
            xhr.onreadystatechange = function() {\r\n \
                if (xhr.readyState == 4 && xhr.status == 200) {\r\n \
                    var response = xhr.responseText;\r\n \
                    if (!response) {\r\n \
                        return;\r\n \
                    }\r\n \
                    \r\n \
                    var raw = JSON.parse(response);\r\n \
                    var absTimers = raw.absTimer;\r\n \
                    for (var i = 0; i < absTimers.length; i++) {\r\n \
                        const newAbstimeContainer = document.createElement('div');\r\n \
                        newAbstimeContainer.innerHTML = abstimeTemplate(i);\r\n \
\r\n \
                        const timePicker = newAbstimeContainer.querySelector('input[type=\"time\"]');\r\n \
                        const operation = newAbstimeContainer.querySelector('select[id=\"operation\"]');\r\n \
                        const channel = newAbstimeContainer.querySelector('select[id=\"channel\"]');\r\n \
                        const repeats = newAbstimeContainer.querySelectorAll('input.repeat');\r\n \
\r\n \
                        timePicker.value = absTimers[i].time;\r\n \
                        operation.value = absTimers[i].operation;\r\n \
                        channel.value = absTimers[i].channel;\r\n \
                        for (var j = 0; j < repeats.length; j++) {\r\n \
                            repeats[j].checked = absTimers[i][repeats[j].value];\r\n \
                        }\r\n \
\r\n \
                        abstimeWrapper.appendChild(newAbstimeContainer);\r\n \
                    }\r\n \
                    abstimeCount = absTimers.length;\r\n \
\r\n \
                    var temps = raw.temp;\r\n \
                    for (var i = 0; i < temps.length; i++) {\r\n \
                        const newTempContainer = document.createElement('div');\r\n \
                        newTempContainer.innerHTML = tempTemplate(i);\r\n \
\r\n \
                        const targetTemp = newTempContainer.querySelector('input[id=\"target-temp\"]');\r\n \
                        const compare = newTempContainer.querySelector('select[id=\"compare\"]');\r\n \
                        const operation = newTempContainer.querySelector('select[id=\"operation\"]');\r\n \
                        const channel = newTempContainer.querySelector('select[id=\"channel\"]');\r\n \
\r\n \
                        compare.value = temps[i].compare;\r\n \
                        targetTemp.value = temps[i].targetTemp;\r\n \
                        operation.value = temps[i].operation;\r\n \
                        channel.value = temps[i].channel;\r\n \
\r\n \
                        tempWrapper.appendChild(newTempContainer);\r\n \
                    }\r\n \
                    tempCount = temps.length;\r\n \
                }\r\n \
            };\r\n \
            xhr.send();\r\n \
        }\r\n \
\r\n \
        loadConfigs();\r\n \
        loadTimers();\r\n \
    </script>\r\n \
\r\n \
\r\n \
</body>\r\n \
</html>\r\n \
";
#endif /* __INDEX_HTML_H__ */
